<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/ledgerCount/ledgerCount.css" />
    <link rel="preload" href="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js" as="script" />
    <link rel="preload" href="{{resPath}}/font/tttgbnumber.ttf" as="font">
    <link rel="preload" href="{{pluResPath}}img/other/原神.png" as="image">
    {{@headStyle}}
  </head>

  <body>
    <div class="container" id="container">
      <div class="head_box">
        <div class="id_text">ID: {{uid}}</div>
        <h2 class="day_text">{{yearText}}原石统计</h2>
        <img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
      </div>
      <div class="data_box">
        <div class="tab_lable">数据总览</div>
        <div class="data_line">
          <div class="data_line_item">
            <div class="num">{{allPrimogemsShow}}</div>
            <div class="lable">总原石</div>
          </div>
          <div class="data_line_item">
            <div class="num">{{allGacha}}抽</div>
            <div class="lable">总抽数</div>
          </div>
          <div class="data_line_item">
            <div class="num">{{maxPrimogems.month}}月</div>
            <div class="lable">原石最多</div>
          </div>
          <div class="data_line_item">
            <div class="num">{{maxPrimogems.value}}</div>
            <div class="lable">{{maxPrimogems.month}}月原石</div>
          </div>
        </div>
        <div class="data_line">
          <div class="data_line_item">
            <div class="num">{{allMora}}</div>
            <div class="lable">总摩拉</div>
          </div>
          <div class="data_line_item">
            <div class="num">{{maxMora.month}}月</div>
            <div class="lable">摩拉最多</div>
          </div>
          <div class="data_line_item">
            {{if group_by.length>0 }}
            <div class="num">{{group_by[0].num}}</div>
            <div class="lable">{{group_by[0].action}}</div>
            {{/if}}
          </div>
          <div class="data_line_item">
            {{if group_by.length>0 }}
            <div class="num">{{group_by[1].num}}</div>
            <div class="lable">{{group_by[1].action}}</div>
            {{/if}}
          </div>
        </div>
      </div>
      <div class="data_box">
        <div class="tab_lable">月份统计</div>
        <div id="chartContainer"></div>
      </div>
      <div class="data_box">
        <div class="tab_lable">详细统计</div>
        <div id="chartContainer2"></div>
      </div>
      {{if hasMore }}
      <div class="hasMore">*该数据只显示最近12个月</div>
      {{/if}}
      <div class="logo">Created By Yunzai-Bot</div>
    </div>
  </body>

  <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
  <script>
    const { Column, Pie } = G2Plot;

    const primogemsMonth = JSON.parse(`{{@ primogemsMonth}}`);
    const primogemsMax = {{maxPrimogems.value}};
    const stackedColumnPlot = new Column("chartContainer", {
      data: primogemsMonth,
      isGroup: true,
      xField: "month",
      yField: "value",
      seriesField: "name",
      animation: false,
      renderer: "svg",
      padding: [40, 10, 30, 52],
      label: {
        position: "top",
        style: {
          fontFamily: "tttgbnumber",
        },
        offsetY: 10,
      },
      xAxis: {
        label: {
          autoHide: false,
          formatter: (v) => {
            return v + "月";
          },
          style: {
            fontFamily: "tttgbnumber",
            fontSize: 14,
          },
        },
      },
      yAxis: {
        label: {
          style: {
            fontFamily: "tttgbnumber",
            fontSize: 14,
          },
        },
      },
    });
    stackedColumnPlot.render();

    const countdata = JSON.parse(`{{@ pieData}}`);
    const piePlot = new Pie("chartContainer2", {
      renderer: "svg",
      animation: false,
      data: countdata,
      appendPadding: 10,
      angleField: "num",
      colorField: "action",
      radius: 1,
      innerRadius: 0.7,
      // appendPadding: 20,
      color: JSON.parse(`{{@ color}}`),
      meta: {
        // num: {
        //   formatter: (v) => `${v}`,
        // },
      },
      label: {
        type: "inner",
        offset: "-50%",
        autoRotate: false,
        style: {
          textAlign: "center",
          fontFamily: "tttgbnumber",
        },
        formatter: ({ percent }) => {
          percent = (percent * 100).toFixed(0);
          return percent >= 2 ? `${percent}%` : "";
        },
      },
      statistic: {
        title: {
          offsetY: -8,
          content: "总计",
        },
        content: {
          style: {
            fontFamily: "tttgbnumber",
          },
        },
      },
      legend: {
        offsetX:-16,
        itemValue: {
          formatter: (text, item) => {
            const items = countdata.filter((d) => d.action === item.value)[0];
            return items.num;
          },
          style: {
            opacity: 0.65,
            fontFamily: "tttgbnumber",
            "fontSize": 16,
          },
        },
        itemName:{
          style: {
            "fontSize": 16,
          },
        }
      },
    });
    piePlot.render();
  </script>
</html>
